<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .box {
        /* position: absolute; */
        width: 1300px;
        height: 400px;
        /* border: 1px solid black; */
        margin: 160px auto;
    }

    .imglist li {
        float: left;
        /* background-color: black; */
    }

    /* .imglist li:nth-child(2n-1) {
        background-color: red;
    } */

    .imglist li input {
        position: relative;
        z-index: 2;
        opacity: 0;
        width: 100px;
        height: 400px;
        transition: .5s;

    }

    .imglist li::before {
        content: "";
        display: block;
        width: 100px;
        height: 404px;
        position: absolute;
        /* top: 0;
        left: 0; */
        background-color: rgba(0, 0, 0, .5);
    }

    .imglist li:nth-child(1) {
        background: url(./img/redmi.png) center/cover;
    }

    .imglist li:nth-child(2) {
        background: url(./img/note9.png)center/cover;
    }

    .imglist li:nth-child(3) {
        background: url(./img/mi.jpg)center/cover;
    }

    .imglist li:nth-child(4) {
        background: url(./img/kaoxiang.png)center/cover;
    }

    .imglist li input:checked {
        width: 1000px;
    }

    .imglist li .bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: .5s;
        z-index: -1;
        /* display: none; */
        /* 模糊 */
        filter: blur(5px);
        opacity: 0;


    }

    .imglist li input:checked+.bg {
        /* display: block; */
        opacity: 1;
    }

    .imglist li .bg img {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="box">
        <ul class="imglist">
            <li>
                <input type="radio" name="ok" checked>
                <div class="bg">
                    <img src="./img/redmi.png" alt="">
                </div>
            </li>
            <li>
                <input type="radio" name="ok">
                <div class="bg">
                    <img src="./img/note9.png" alt="">
                </div>
            </li>
            <li>
                <input type="radio" name="ok">
                <div class="bg">
                    <img src="./img/mi.jpg" alt="">
                </div>
            </li>
            <li>
                <input type="radio" name="ok">
                <div class="bg">
                    <img src="./img/kaoxiang.png" alt="">
                </div>
            </li>
        </ul>
    </div>
</body>

</html>